<template>
    <el-dialog :visible="visible" title="接力泵" width="400px" @close="onClose" @open="onOpen">
        <div v-for="(item,index) in config.applyDets" :key="item.id" class="item">
            <div class="title">{{`接力泵${index + 1}`}}</div>
            <div class="type">
                <div class="left">泵类型：</div>
                <div class="right">{{item.pumpType}}</div>
            </div>
            <div class="code">
                <div class="left">车牌/编号：</div>
                <div class="right">
                    <el-select v-model="item.pumpNo" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button class="bottom_all_two" @click="onClose">取 消</el-button>
            <el-button class="bottom_all" type="primary" @click="onConfirm">保 存</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import { getPumpNoList, updateApplyDetList } from "@/api/smart/schedul/pump.js";

    export default {
        data() {
            return {
                options: []
            };
        },
        props: {
            config: {
                type: Object,
                default: () => ({}),
            },
            visible: {
                type: Boolean,
            },
        },
        methods: {
            async onOpen() {
                const params = {
                    proId: this.config.logisticsNo,
                    pumpTypeId: this.config.pumpTypeId
                };
                const res = await getPumpNoList(params);
                if(res && res.code === 1001) {
                    this.options = [...res.data.map(item=> ({value: item.code,label: item.carNo}))]
                }
            },
            onClose() {
                this.$emit("update:visible", false)
            },
            async onConfirm() {
                const params = this.config.applyDets.map(item=>({id: item.id,pumpNo: item.pumpNo}))
                const res = await updateApplyDetList(params);
                if(res && res.code === 1001) {
                    this.$message.success("保存成功")
                    this.$emit("updated", false)
                    this.$emit("update:visible", false)
                } else {
                    this.$message.warning("保存失败")
                }
                
            },
        },
    };
</script>
<style lang="scss" scoped>
.item {
    background: #f1f1f1;
    padding: 20px;
    margin-bottom: 20px;
}
.title, .type, .code {
    height: 36px;
    display: flex;
    align-items: center;
    .left {
        text-align: right;
        width: 80px;
    }
}
</style>